<template>
    <div class="app-container">
        <h2>高级搜索表单示例</h2>
    
    <search-form
      v-model="formData"
      :config="searchFormConfig"
      @search="handleSearch"
      @reset="handleReset"
    />
    
    <el-card class="result-card">
      <h3>搜索结果</h3>
      <pre>{{ JSON.stringify(searchResult, null, 2) }}</pre>
    </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SearchForm from '@/components/SearchForm/SearchForm.vue'
import {
  FormItemType,
  SearchFormConfig,
  DatePickerType,
} from '@/components/SearchForm/types'
const formData = ref({})
const searchResult = ref({})
// 城市选项
const cityOptions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' },
];

// 部门树数据
const departmentTree = [
  {
    id: 1,
    label: '技术部',
    children: [
      { id: 11, label: '前端组' },
      { id: 12, label: '后端组' },
      { id: 13, label: '测试组' },
    ],
  },
  {
    id: 2,
    label: '产品部',
    children: [
      { id: 21, label: '产品设计组' },
      { id: 22, label: '用户研究组' },
    ],
  },
  {
    id: 3,
    label: '市场部',
    children: [
      { id: 31, label: '国内市场组' },
      { id: 32, label: '海外市场组' },
    ],
  },
];
const searchFormConfig: SearchFormConfig = {
  formItems: [
    {
      type: FormItemType.INPUT,
      field: 'keyword',
      label: '关键词',
      placeholder: '请输入关键词搜索',
      clearable: true,
      maxLength: 50,
      showWordLimit: true,
      prefixIcon: 'Search',
      order: 1,
    },
    {
      type: FormItemType.SELECT,
      field: 'status',
      label: '状态',
      placeholder: '请选择状态',
      clearable: true,
      options: [
        { label: '待处理', value: 'pending' },
        { label: '处理中', value: 'processing' },
        { label: '已完成', value: 'completed' },
        { label: '已取消', value: 'cancelled' },
      ],
      order: 2,
    },
    {
      type: FormItemType.DATE_PICKER,
      field: 'dateRange',
      label: '日期范围',
      dateType: DatePickerType.DATERANGE,
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      clearable: true,
      order: 3,
    },
    {
      type: FormItemType.RADIO_GROUP,
      field: 'priority',
      label: '优先级',
      options: [
        { label: '高', value: 'high' },
        { label: '中', value: 'medium' },
        { label: '低', value: 'low' },
      ],
      button: true,
      order: 4,
    },
    {
      type: FormItemType.CHECKBOX_GROUP,
      field: 'tags',
      label: '标签',
      options: [
        { label: '重要', value: 'important' },
        { label: '紧急', value: 'urgent' },
        { label: '跟进', value: 'follow-up' },
      ],
      collapsible: true,
      order: 6,
    },
    {
      type: FormItemType.TREE_SELECT,
      field: 'department',
      label: '部门',
      data: departmentTree,
      multiple: true,
      filterable: true,
      collapsible: true,
      order: 5,
    },
    {
      type: FormItemType.SELECT,
      field: 'city',
      label: '城市',
      options: cityOptions,
      filterable: true,
      collapsible: true,
      order: 7,
    },
    {
      type: FormItemType.NUMBER,
      field: 'amount',
      label: '金额',
      min: 0,
      max: 10000,
      precision: 2,
      step: 100,
      controlsPosition: 'right',
      collapsible: true,
      order: 8,
    },
    {
      type: FormItemType.SWITCH,
      field: 'isActive',
      label: '是否激活',
      activeText: '是',
      inactiveText: '否',
      collapsible: true,
      order: 9,
    },
  ],
  span: 6,
  gutter: 20,
  labelWidth: '80px',
  collapsible: true,
  defaultCollapse: true,
  showResetButton: true,
}

// 处理搜索事件
const handleSearch = (formValue: Record<string, any>) => {
  searchResult.value = formValue;
};

// 处理重置事件
const handleReset = () => {
  searchResult.value = {};
};
</script>